<template>
    <div class="problem-container">
        <el-empty v-if="tableData.length == 0 ? true : false" description="还有提交过呢~"></el-empty>
        <template v-else>
            <el-table ref="tableRef" :data="slicedTable(tableData)" stripe style="width: 100%" size="default">
                <el-table-column prop="title" label="题目">
                    <!-- 题目 -->
                    <template #default="{ row }">
                        <router-link :to="{ path: '/problem/twosum/' }">{{ row.title }}</router-link>
                    </template>
                </el-table-column>

                <el-table-column prop="level" label="难度" filter-placement="bottom-end">
                    <!-- 难度 -->
                    <template #default="{ row }">
                        <el-tag :type="levelView(row.level)">{{ row.level }}</el-tag>
                    </template>
                </el-table-column>

                <el-table-column prop="recent-passtime" label="最近提交时间">
                    <!-- 最近提交时间 -->
                    <template #default="{ row }">
                        <el-text type="info" size="large">
                            {{ row.recentSubmitTime }}
                        </el-text>
                    </template>
                </el-table-column>

                <el-table-column prop="submit-count" label="提交数">
                    <!-- 提交数 -->
                    <template #default="{ row }">
                        {{ row.submitCount }}
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination v-model:current-page="currentPage" :background="true" layout="prev, pager, next, jumper"
                :total="totalPages" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                class="pagination" />
        </template>
    </div>
</template>

<script setup>
import { ref } from 'vue'

// const tableData = []
const tableData = [
    {
        title: '两数之和',
        level: '简单',
        recentSubmitTime: '2024-4-11 11:24',
        submitCount: '1',
    },
    {
        title: '两数之和',
        level: '中等',
        recentSubmitTime: '2024-4-11 11:24',
        submitCount: '1',
    },
    {
        title: '两数之和',
        level: '困难',
        recentSubmitTime: '2024-4-11 11:24',
        submitCount: '1',
    },
    {
        title: '两数之和',
        level: '简单',
        recentSubmitTime: '2024-4-11 11:24',
        submitCount: '1',
    },
    {
        title: '两数之和',
        level: '中等',
        recentSubmitTime: '2024-4-11 11:24',
        submitCount: '1',
    },
    {
        title: '两数之和',
        level: '困难',
        recentSubmitTime: '2024-4-11 11:24',
        submitCount: '1',
    },
    {
        title: '两数之和',
        level: '简单',
        recentSubmitTime: '2024-4-11 11:24',
        submitCount: '1',
    },
    {
        title: '两数之和',
        level: '中等',
        recentSubmitTime: '2024-4-11 11:24',
        submitCount: '1',
    },
    {
        title: '两数之和',
        level: '困难',
        recentSubmitTime: '2024-4-11 11:24',
        submitCount: '1',
    },
    {
        title: '两数之和',
        level: '困难',
        recentSubmitTime: '2024-4-11 11:24',
        submitCount: '1',
    },
    {
        title: '两数之和',
        level: '简单',
        recentSubmitTime: '2024-4-11 11:24',
        submitCount: '1',
    },
    {
        title: '两数之和',
        level: '中等',
        recentSubmitTime: '2024-4-11 11:24',
        submitCount: '1',
    },
    {
        title: '两数之和',
        level: '困难',
        recentSubmitTime: '2024-4-11 11:24',
        submitCount: '1',
    },
    {
        title: '两数之和',
        level: '简单',
        recentSubmitTime: '2024-4-11 11:24',
        submitCount: '1',
    },
    {
        title: '两数之和',
        level: '中等',
        recentSubmitTime: '2024-4-11 11:24',
        submitCount: '1',
    },
    {
        title: '两数之和',
        level: '困难',
        recentSubmitTime: '2024-4-11 11:24',
        submitCount: '1',
    },
    {
        title: '两数之和',
        level: '简单',
        recentSubmitTime: '2024-4-11 11:24',
        submitCount: '1',
    },
    {
        title: '两数之和',
        level: '中等',
        recentSubmitTime: '2024-4-11 11:24',
        submitCount: '1',
    },
    {
        title: '两数之和',
        level: '困难',
        recentSubmitTime: '2024-4-11 11:24',
        submitCount: '1',
    },
    {
        title: '两数之和',
        level: '困难',
        recentSubmitTime: '2024-4-11 11:24',
        submitCount: '1',
    },
    {
        title: '两数之和',
        level: '中等',
        recentSubmitTime: '2024-4-11 11:24',
        submitCount: '1',
    },
    {
        title: '两数之和',
        level: '困难',
        recentSubmitTime: '2024-4-11 11:24',
        submitCount: '1',
    },
    {
        title: '两数之和',
        level: '困难',
        recentSubmitTime: '2024-4-11 11:24',
        submitCount: '1',
    },
]

const currentPage = ref(1)

const totalPages = ref((tableData.length))

function slicedTable(tableData) {
    return tableData.slice((currentPage.value - 1) * 10, (currentPage.value) * 10 - 1)
}

const handleSizeChange = (val) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`)
}

function levelView(level) {
    switch (level) {
        case "简单":
            return "success";
        case "中等":
            return "warning";
        case "困难":
            return "danger";
        default:
            return "info";
    }
}
</script>

<style scoped>
.problem-container {
    padding: 0 60px;
    height: 600px;
}

.pagination {
    margin-top: 30px;
    justify-content: center;
}
</style>